<template>
  <div class="container">
    <div class="tree-container">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :default-checked-keys="defaultCheckedKeys"
        :check-strictly="true"
      />
    </div>
    <div class="content-container">

      <el-row :gutter="10" class="mb8" v-if="showAddButton">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增
          </el-button>
        </el-col>
      </el-row>
      <div v-if="selectedNode">
        <el-table v-loading="loading" :data="medicineList">
          <el-table-column label="药品名称" align="center" prop="medicineName"/>
          <el-table-column label="用药剂量" align="center" prop="dosage"/>
          <el-table-column label="用药频率" align="center" prop="usageFrequency"/>
          <el-table-column label="用药建议" align="center" prop="doctorAdvice"/>

          />
        </el-table>
      </div>
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="药品名称" prop="medicinalId">
            <el-select v-model="form.medicinalId" placeholder="请选择药品名称">
              <el-option
                v-for="medicine in medicineListOptions"
                :key="medicine.id"
                :label="medicine.medicineName"
                :value="medicine.id"
              />
            </el-select>
            <!--            <el-input v-model="form.medicinalId" placeholder="请输入药品名称" />-->
          </el-form-item>
          <el-form-item label="用药剂量" prop="dosage">
            <el-input v-model="form.dosage" placeholder="请输入药品剂量"/>
          </el-form-item>
          <el-form-item label="用药频率" prop="dosage">
            <el-input v-model="form.usageFrequency" placeholder="请输入用药频率"/>
          </el-form-item>
          <el-form-item label="用药建议" prop="dosage">
            <el-input v-model="form.doctorAdvice" placeholder="请输入用药建议"/>
          </el-form-item>
          <el-form-item label="成员id" prop="familyMemberId" style="display: none">
            <el-input v-model="form.familyMemberId"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {addFamilyMedicine, listFamilyMedicine} from "@/api/system/familyMedicine";
import {listMedicine, listMedicineNull} from "@/api/system/medicine";

export default {
  data() {
    return {
      // 是否显示弹出层
      open: false,
      dosage: undefined,
      form: {
        medicinalId: undefined,
        usageFrequency: undefined,
        doctorAdvice: undefined,
        familyMemberId: undefined,
        deptId: undefined,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        familyMemberId: undefined,
      },
      medicineList: [],
      medicineListOptions: [], // 药品列表选项
      treeData: [],
      selectedNode: null,
      defaultProps: {
        children: 'children',
        label: 'deptName',
      },
      showAddButton:false,
      defaultCheckedKeys: [1], // 可选，默认勾选的节点
    };
  },

  created() {
    this.getList();

  },
  mounted() {
    this.getMedicineList();
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        medicineName: null,
        dosage: null,
        introduction: null,
        quantity: null,
        expirationDate: null,
        storageCondition: null,
        batchNumber: null,
        manufacturer: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    getList() {
      this.loading = true;
      listDept(this.queryParams).then(response => {
        this.treeData = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加药品信息";
    },
    handleNodeClick(node) {
      this.selectedNode = node;
      this.form.familyMemberId = node.deptId;
      this.queryParams.familyMemberId = node.deptId;
      console.log(this.queryParams.familyMemberId)
      listFamilyMedicine(this.queryParams).then(response => {
        this.medicineList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      //给搜索条件赋值
      this.showAddButton =!node.children || node.children.length === 0;
      console.log(node)
      console.log("====================")
      console.log(this.form.familyMemberId)
      console.log("====================")

    },
    cancel() {
      this.open = false;
      this.reset();
    },
    getMedicineList() {
      console.log("11111111111")
      listMedicineNull(null).then(response => {
        this.medicineListOptions = response.data;
        console.log(response.data)
      });
    },

    /** 提交按钮 */
    submitForm() {
      console.log("------------")
      console.log(this.form)
      this.form.familyMemberId = this.selectedNode.deptId
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            addFamilyMedicine(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFamilyMedicine(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },

};
</script>

<style scoped>
.container {
  display: flex;
}

.tree-container {
  width: 300px; /* 设置树组件的宽度 */
  border-right: 1px solid #dcdfe6; /* 树组件右侧边框 */
  padding: 10px;
  box-sizing: border-box;
}

.content-container {
  flex: 1; /* 右侧内容区域自适应宽度 */
  padding: 20px;
}
</style>
